<template>
  <div>
    <app-header />
    <app-xbox />

    <div class="content" style="width: 100%">
      <div class="page">
        <span>当前位置&nbsp;:&nbsp;</span>
        <div>
          <a href="#">首页&nbsp;></a>
          <a href="#">笔记本电脑&nbsp;></a>
          <a href="#">游戏笔记本&nbsp;></a>
          <a href="#">{{ wares.type }}</a>
        </div>
      </div>
      <div class="content_main_warp">
        <div class="contenet_mian_body">
          <!-- 放大镜 -->
          <goods-zoom :wares="wares" :tu1="wares.gurl"></goods-zoom>
          <div class="rigth_box">
            <div class="title">{{ wares.gname }}</div>
            <div class="subtitle">
              <span
                >140W满功耗RTX3060，双显三模，144Hz高色域电竞屏，享一年意外险！咨询客服有惊喜！</span
              >
              <a href="#">购天选笔记本享一年意外险+双肩包鼠啦！</a>
            </div>
            <div class="mian_att">
              <!-- 限时抢购 -->
              <div class="att1">
                <div class="gou">
                  <img
                    src="http://1.117.75.96:8080/goods/UI/time@1x.png"
                    alt=""
                  />
                  <span>限时抢购</span>
                </div>
                <div class="price_box">
                  <div class="label">限时抢购</div>
                  <div class="price">
                    ￥<span>{{ wares.gprice }}</span>
                  </div>
                  <div class="original_price">￥{{ wares.gprice + 300 }}</div>
                  <div class="guize">
                    <img
                      src="http://1.117.75.96:8080/goods/UI/msg.png"
                      alt=""
                    />活动规则
                  </div>
                </div>
              </div>
              <!-- 优惠信息 -->
              <div class="att2">
                <div class="label">优惠信息</div>
                <ul>
                  <li>
                    <span class="x">包邮</span>
                    <span>订单总金额满10元包邮</span>
                  </li>
                  <li>
                    <span class="x">赠品</span>
                    <span>天选双肩背包&nbsp;x1</span>
                  </li>
                </ul>
              </div>
              <!-- 优惠券 -->
              <div class="att3">
                <div class="label">优惠券</div>
                <div class="item">
                  <div class="quan">满99减5</div>
                  <div class="quan">满999减11</div>
                </div>
              </div>
              <div class="hr"></div>
              <!-- 官网权益 -->
              <div class="att4">
                <div class="label">官网权益</div>
                <div class="item">
                  <span>· 享笔记本意外险*</span>
                  <span>· 享分期免息优惠*</span>
                  <span>· 价保7天*</span>
                </div>
              </div>
            </div>
            <!-- 加购 -->
            <div class="more_att">
              <!-- 服务保障 -->
              <div class="item">
                <div class="label">延长保修</div>
                <div class="item_cont">
                  <div class="card">
                    3年省心包
                    <span>￥369.00</span>
                    <img
                      src="http://1.117.75.96:8080/goods/UI/exclamation1x.png"
                      alt=""
                    />
                  </div>
                  <div class="card">
                    开学护航4年保
                    <span>￥399.00</span>
                    <img
                      src="http://1.117.75.96:8080/goods/UI/exclamation1x.png"
                      alt=""
                    />
                  </div>
                  <div class="card">
                    3年全面保
                    <span>￥369.00</span>
                    <img
                      src="http://1.117.75.96:8080/goods/UI/exclamation1x.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <!-- 服务升级 -->
              <div class="item">
                <div class="label">服务升级</div>
                <div class="item_cont">
                  <div class="card">
                    新机开荒
                    <span>￥38.00</span>
                    <img
                      src="http://1.117.75.96:8080/goods/UI/exclamation1x.png"
                      alt=""
                    />
                  </div>
                  <div class="card">
                    2年上门检修
                    <span>￥99.00</span>
                    <img
                      src="http://1.117.75.96:8080/goods/UI/exclamation1x.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <!-- 按钮 -->
              <div class="item">
                <div class="label">购买数量</div>
                <div class="item_cont">
                  <div class="y counter">
                    <img
                      src="http://1.117.75.96:8080/goods/UI/reduce.png"
                      alt=""
                      @click="cout_jian()"
                    />
                    <span>{{ counter }}</span>
                    <img
                      src="http://1.117.75.96:8080/goods/UI/add.png"
                      alt=""
                      @click="cout_jia()"
                    />
                  </div>
                  <div class="y">
                    <button @click="joinCart">加入购物车</button>
                    <button class="goumai" @click="test">立即购买</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <goods-recom :recom="recom" />
    <goods-tab :wares="wares" />
    <app-foot />
  </div>
</template>

<script setup>
import AppHeader from "../components/AppHeader.vue";
import AppXbox from "../components/AppXbox.vue";
import AppFoot from "../components/AppFoot.vue";
import GoodsZoom from "../components/GoodsZoom.vue";
import GoodsRecom from "../components/GoodsRecom.vue";
import GoodsTab from "../components/GoodsTab.vue";
import { ref, watch } from "vue-demi";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getWaresInfo } from "@/api/goods.js";
import store from "../store";

let route = useRoute();
let router = useRouter();
//数据初始化
let wares = ref(false);
let recom = ref([]);

//获取信息
async function getInfo() {
  let id = route.params.id;
  let res = await getWaresInfo(id);
  console.log(res);
  if (res) {
    wares.value = res.info;
    recom.value = res.recom;
  }
}
getInfo();

//数量增减
let counter = ref(1);
function cout_jian() {
  if (this.counter <= 1) return 0;
  counter.value--;
}
function cout_jia() {
  counter.value++;
}

//加入购物车
function joinCart() {
  if (Object.keys(store.state.user.userinfo).length) {
    ElMessageBox.confirm("确定要加入购物车吗?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "info",
    })
      .then(() => {
        console.log("yyyyyyyyyy");
        let data = {
          gid: wares.value.gid,
          gname: wares.value.gname,
          gprice: wares.value.gprice,
          uid: store.state.user.userinfo.id,
          number: counter.value,
          gurl: wares.value.gurl[0],
        };
        store.dispatch("cart/cartActions", data);
        ElMessage({
          type: "success",
          message: "加入购物车成功",
        });
      })
      .catch(() => {});
  } else {
    ElMessage.error(
      '你还没有登陆,请先登录'
    )
  }
}

//开发提示
function test() {
  ElMessageBox.alert("功能还在开发中,敬请期待", "提示", {
    confirmButtonText: "OK",
  });
}

//侦听路由变化
watch(route,(val)=>{
  getInfo();
},{deep:true})
</script>

<style lang="less" scoped>
.content {
  width: 100%;

  .page {
    width: 1226px;
    margin: 0 auto;

    > span {
      font-size: 14px;
      color: #2b2e36;
      margin-right: 2px;
      opacity: 0.5;
    }

    div {
      display: inline-block;
      color: #2b2e36;
      line-height: 19px;
      font-size: 14px;

      a {
        color: #555;
        outline: none;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }

  .content_main_warp {
    font-size: 14px;
    width: 1235px;
    margin: 40px auto;

    .contenet_mian_body {
      .rigth_box {
        display: inline-block;
        width: 727px;
        vertical-align: top;

        .label {
          width: 86px;
          height: 25px;
        }

        .title {
          font-size: 20px;
          font-weight: 400;
          text-align: left;
          color: #2b2e36;
          line-height: 30px;
          margin-bottom: 9px;
        }

        .subtitle {
          font-size: 14px;
          font-weight: 400;
          text-align: left;
          color: #bc283e;
          line-height: 20px;

          span {
            line-height: 20px;
          }

          a {
            color: #555;
            outline: none;
            text-decoration: none;
          }
        }

        .mian_att {
          margin-top: 10px;
          padding: 0px 0px 1px 0px;
          background: #f5f5f5;
          font-size: 14px;
          color: #2b2e36;

          .att1 {
            .gou {
              background: #ea334f;
              height: 50px;
              display: flex;
              align-items: center;
              padding: 0px 25px;
              color: #fff;

              img {
                width: 22px;
                height: 22px;
                margin-right: 11px;
                display: inline-block;
              }

              span {
                font-size: 16px;
                font-weight: 700;
                margin-right: 5px;
              }
            }

            .price_box {
              align-items: flex-end;
              padding-top: 26px !important;
              position: relative;
              display: flex;
              margin-bottom: 20px;
              padding: 0px 25px;

              .label {
                color: #ea334f;
                line-height: 25px;
              }

              .price {
                color: #ea334f;

                span {
                  font-size: 27px;
                  color: #ea334f;
                }
              }

              .original_price {
                color: #c0c3c7;
                font-size: 16px;
                margin-left: 20px;
                text-decoration: line-through;
              }

              .guize {
                position: absolute;
                right: 40px;
                top: 40px;

                img {
                  width: 16px;
                  height: 16px;
                  vertical-align: middle;
                  margin-right: 5px;
                }
              }
            }
          }

          .att2 {
            display: flex;
            margin-bottom: 17px;
            padding: 0px 25px;

            ul {
              li {
                margin-bottom: 15px;
                display: flex;
                align-items: center;

                .x {
                  border: 1px solid #ea334f;
                  padding: 0px 6px;
                  color: #ea334f;
                  margin-right: 17px;
                }
              }
            }
          }

          .att3 {
            display: flex;
            margin-bottom: 17px;
            padding: 0px 25px;

            .item {
              display: flex;
              flex: 1;
              flex-wrap: wrap;

              .quan {
                color: #fff;
                margin-right: 25px;
                position: relative;
                margin-bottom: 15px;
                cursor: pointer;
                z-index: 9;
                width: 70px;
                height: 24px;
                background-color: red;
                background-size: 100% 100%;
                margin-top: -2px;
                line-height: 24px;
                text-align: center;
              }
            }
          }

          .hr {
            opacity: 0.25;
            border-top: 1px dashed #707070;
            margin-bottom: 24px;
          }

          .att4 {
            display: flex;
            margin-bottom: 17px;
            padding: 0px 25px;

            .item {
              display: flex;
              flex: 1;
              flex-wrap: wrap;

              span {
                margin-right: 20px;
              }
            }
          }
        }

        .more_att {
          margin-top: 30px;

          .item {
            display: flex;
            padding: 0px 0px 0px 25px;
            margin-bottom: 5px;

            .label {
              width: 86px;
              height: 25px;
              line-height: 25px;
            }

            .item_cont {
              display: flex;
              flex: 1;
              flex-wrap: wrap;

              .card {
                padding: 8px 18px;
                margin-right: 46px;
                font-size: 12px;
                border: 1px solid #d2cdcd;
                cursor: pointer;
                display: inline-block;
                margin-bottom: 15px;
                position: relative;

                span {
                  margin-left: 15px;
                }

                img {
                  position: absolute;
                  width: 16px;
                  height: 16px;
                  top: 6px;
                  right: -28px;
                }
              }

              .y {
                margin-bottom: 15px;
                width: 100%;
                height: 25px;

                img {
                  width: 22px;
                  height: 22px;
                  cursor: inherit;
                  vertical-align: middle;
                }

                span {
                  height: 21px;
                  line-height: 25px;
                  font-size: 16px;
                  color: #2b2e36;
                  margin-right: 20px;
                  margin-left: 20px;
                }

                button {
                  width: 160px;
                  height: 41px;
                  background: #e9f2ff;
                  border: 1px solid #1e7cff;
                  color: #1e7cff;
                  margin-right: 16px;
                  cursor: pointer;
                }

                .goumai {
                  color: #fff;
                  background-color: #1e7cff;
                }

                .goumai:hover {
                  background-color: #126be8;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
